<!--
<div id="hero" class="container-fluid" xmlns="http://www.w3.org/1999/html">
   <div class="row-fluid">

      <header class="jumbotron masthead">
         <div class="inner span5">
            <h1>BootMetro</h1>
            <h2>Metro style web framework</h2>
            <p>Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the "Windows 8 MetroUI" style, without the need to run on Windows 8.</p>
            <p>
               <a href="https://github.com/aozora/bootmetro/zipball/master" class="btn btn-large btn-primary btn-success">
                  Download Now <small>it's free</small>
                  <b class="icon-arrow-right-7"></b>
               </a>
               <br/>
               <span class="label label-success">Latest version: 0.6</span>
            </p>
         </div>
         <div class="span7">
            <img id="hero-image" class="pull-right" width="500" height="265" src="content/img/hero4.png" alt="hero">
         </div>
      </header>

   </div>
</div>
-->
<header id="hero" class="">

      <div class="jumbotron masthead">
         <div class="container-fluid">
            <div class="row-fluid">
               <div class="inner span5">
                  <h1>BootMetro</h1>
                  <h2>Metro style web framework</h2>
                  <p>Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the "Windows 8 App Store" style, without the need to run on Windows 8.</p>
                  <p>
                     <a class="btn btn-large btn-primary" href="https://github.com/aozora/bootmetro/zipball/master">
                        Download Now
                        <i class="icon-arrow-right-7"></i>
                     </a>
                     <span>it's free</span>
                     <br/>
                     <span class="label label-success">Latest version: 0.6</span>
                  </p>
               </div>
               <div class="span7">
                  <img id="hero-image" class="pull-right" width="500" height="265" src="content/img/hero4.png" alt="hero">
               </div>
            </div>
         </div>
      </div>

</header>


<div id="home-tiles" class="container-fluid metro">
   <div class="row-fluid">
      <div class="span4">
         <a class="tile wide imagetext bg-color-orange first" href="https://github.com/aozora/bootmetro">
            <div class="image-wrapper">
               <span class="icon icon-github"/>
            </div>
            <div class="column-text">
               <div class="text-header3">View project on GitHub</div>
            </div>
         </a>
      </div>
      <div class="span4">
         <a class="tile wide imagetext bg-color-green middle" href="./hub.html">
            <div class="image-wrapper">
               <span class="icon icon-grid-view"/>
            </div>
            <div class="column-text">
               <div class="text-header3">View the Demo online</div>
            </div>
         </a>
      </div>
      <div class="span4">
         <a class="tile wide imagetext bg-color-blue last" href="https://twitter.com/aozoralabs">
            <div class="image-wrapper">
               <span class="icon icon-twitter"/>
            </div>
            <div class="column-text">
               <div class="text-header3">Follow on Twitter</div>
            </div>
         </a>
      </div>
   </div>
</div>

<div class="marketing metro container-fluid">
   <h1>Features</h1>
   <p class="marketing-byline">BootMetro is built on top of <a href="http://twitter.github.com/bootstrap/index.html">Twitter Bootstrap</a> and inspired by the Metro UI CSS by Sergey Pimenov</p>

   <div class="row-fluid">
      <div class="span4">
         <h2>Create your Hub</h2>
         <div class="tile wide image">
            <img src="content/img/detail-hub.png" alt="hub" />
         </div>
         <p>Give more focus to your content. With a Metro style app you give users immediately focus on the primary infos, increasing the usability and reducing the distractions.</p>
         <p>Use the same tile templates as defined for the original Windows 8 MetroUI.</p>
      </div>
      <div class="span4">
         <h2>Actions</h2>
         <div class="tile wide image">
            <img src="content/img/detail-appbar-1.png" alt="appbar" />
         </div>
         <p>Use the ApplicationBar to show contextual icon action.</p>
      </div>
      <div class="span4">
         <h2>Navigation</h2>
         <div class="tile wide image">
            <img src="content/img/detail-headermenu.png" alt="headermenu" />
         </div>
         <p>Implement the navigation in pure MetroUI style, use back-button and the header menu to provide simple ways to navigate to other pages.</p>
      </div>
   </div>
   <div class="row-fluid">
      <div class="span4">
         <h2>Charms</h2>
         <div class="tile wide image">
            <img src="content/img/detail-charms.png" alt="charms" />
         </div>
         <p>Create charms panels to show contextual settings.</p>
      </div>
      <div class="span4">
         <h2>Font Icons</h2>
         <div class="tile wide image">
            <img src="content/img/detail-icons.png" alt="icons" />
         </div>
         <p>With the awesome <a href="http://keyamoon.com/icomoon">IcoMoon</a> font icon set, you can use hundreds of font icons with any color and any dimension.</p>
      </div>
   </div>
</div>



